<!--
calc()
    可以进行属性计算，不再是固定死的值

注意
    可以用圆括号设立优先顺序
    加减：运算符两旁必须加空白符，否则解析为无效的表达式
            calc(45% -8px)   无效
            calc(45% - 8px)  有效
    乘：两数至少一个是number类型，另一个随意（例如百分比）
    除：除号右边的数必须是number类型，左边的随意
-->
<style>
  .out {
    width: 500px;
    height: 400px;
    background-color: cyan;
  }
  .in {
    /* 父盒子随意变，但子盒子永远是比父盒子少50px */
    /* width: calc(500px - 50px); */
    width: calc(100% - 50px);
    height: 200px;
    background-color: skyblue;
  }
</style>

<div class="out">
  <div class="in"></div>
</div>
